<template>
  <d2-container>
    <template slot="header">
      <el-form
        :inline="true"
        :model="queryForm"
        ref="queryForm"
        size="mini"
        style="margin-bottom: -18px;"
      >
        <el-form-item label="区域地址" prop="areaName">
          <el-input
            v-model="queryForm.areaName"
            placeholder="用户"
            style="width: 100px;"
            :disabled="true"
          />
        </el-form-item>

        <el-form-item label="客户编号" prop="customerSerialnumber">
          <el-input
            v-model="queryForm.customerSerialnumber"
            placeholder="客户编号"
            style="width: 100px;"
          />
        </el-form-item>

        <el-form-item label="客户名称" prop="customerName">
          <el-input v-model="queryForm.customerName" placeholder="客户名称" style="width: 100px;" />
        </el-form-item>

        <el-form-item label="手机号码" prop="customerPhone">
          <el-input v-model="queryForm.customerPhone" placeholder="手机号码" style="width: 100px;" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleFormSubmit">
            <d2-icon name="search" />查询
          </el-button>
        </el-form-item>
      </el-form>
    </template>
    <split-pane :min-percent="10" :max-percent="20" :default-percent="20" split="vertical">
      <template slot="paneL">
        <my-area-tree @change="onAreaChange" />
      </template>
      <template slot="paneR">
        <d2-crud
          ref="d2Crud"
          :columns="columns"
          :data="data"
          :loading="loading"
          :pagination="pagination"
          @pagination-current-change="paginationCurrentChange"
        ></d2-crud>
      </template>
    </split-pane>
  </d2-container>
</template>

<script>
import util from '@/libs/util'
import MyAreaTree from '@/components/my-area-tree'

export default {
  name: 'arrearage',
  components: { MyAreaTree },

  data () {
    return {
      loading: false,
      pagination: {
        currentPage: 1,
        pageSize: 100,
        total: 0
      },
      queryForm: {
        areaId: '1',
        areaName: '中国',
        customerName: '',
        customerPhone: '',
        customerSerialnumber: ''
      },
      columns: [
        {
          title: '序号',
          key: 'serialNum',
          width: 50
        },
        {
          title: '户号',
          key: 'householdSerialnumber',
          sortable: true
        },
        {
          title: '地址',
          key: 'householdAddress',
          sortable: true
        },
        {
          title: '客户名称',
          key: 'customerName',
          sortable: true
        },
        {
          title: '手机号码',
          key: 'customerPhone',
          sortable: true
        },
        {
          title: '欠费金额',
          key: 'arrearsFee',
          sortable: true
        }
      ],
      data: [],
      treeData: [],
      values: [],
      selectParams: {
        size: 'mini'
      },
      treeParams: {
        'default-expand-all': true,
        data: [],
        props: {
          children: 'children',
          label: 'name',
          value: 'id'
        }
      }
    }
  },
  mounted () {
    this.fetchData()
  },
  methods: {
    // 分页操作
    paginationCurrentChange (currentPage) {
      this.pagination.currentPage = currentPage
      this.fetchData()
    },
    onAreaChange (data, node) {
      this.queryForm.areaId = data.id
      this.queryForm.areaName = data.name
      this.fetchData()
    },
    fetchData () {
      this.loading = true
      this.$api
        .admin_customerFee_getArrears({
          pageNum: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          ...this.queryForm
        })
        .then(res => {
          this.data = res.data
          this.pagination.total = res.total
        })
        .catch(err => {
          console.log('err', err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleFormSubmit () {
      this.pagination.currentPage = 1
      this.fetchData()
    }
  }
}
</script>
